import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Card, Form, Input, Select, Button, Modal, Upload, Icon, InputNumber } from 'antd';
import InputColor from 'react-input-color';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {
    sm: { span: 6 },
  },
  wrapperCol: {
    sm: { span: 18 },
  },
};

@connect(({ watermarkInterface, loading }) => ({
  watermarkInterface,
  loading: loading.models.watermarkInterface,
}))
@Form.create()
class WatermarkInterface extends PureComponent {
  state = {
    detailVisible: false,
    fileList: [],
    uploading: false,
    imgData: '',
  };

  detailHandelVisible = (flag) => {
    this.setState({
      detailVisible: !!flag
    });
  };

  doUpload = () => {
    const {dispatch, groupId} = this.props;
    const {fileList} = this.state
    if (fileList && fileList.length > 5) {
      Modal.warning({title: "一次最多上传5个文件"});
      return;
    }

    const formData = new FormData();
    fileList.forEach((file) => {
      formData.append('file', file);
    });
    formData.append('dirId', 0);
    if (groupId) {
      formData.append('groupId', groupId);
    }
    this.setState({
      uploading: true,
    });
    dispatch({
      type: 'watermarkInterface/queryList',
      payload: formData,
      callback: (res) => {
        if (res.result == "ok") {
          this.setState({
            // fileList: [],
            uploading: false,
          });
          Modal.success({title: res.msg});
        } else {
          this.setState({
            uploading: false,
          });
          Modal.error({title: '操作失败', content: res.msg});
        }
      },
    });
  }

  willLook = e => {
    e.preventDefault();
    const { form } = this.props;
    this.detailHandelVisible(true)
    form.validateFields((err, fieldsValue) => {
      const params = {
        waterType: 1,
        fileSuffix: fieldsValue.fileSuffix,
        font: fieldsValue.font,
        fontSize: fieldsValue.fontSize,
        color: fieldsValue.color.hex,
        tilt: fieldsValue.tilt,
        transparency: fieldsValue.transparency,
        rowNums: fieldsValue.rowNums,
        colNums: fieldsValue.colNums,
        picWidth: fieldsValue.picWidth,
        picHeight: fieldsValue.picHeight,
        waterContent: fieldsValue.waterContent,
      }
      this.preview(params);
    });
  }

  // 水印预览
  preview(params) {
    const { dispatch} = this.props;
    dispatch({
      type: 'watermarkInterface/queryList',
      payload: params,
      callback: (res) => {
        if(res.result == "ok") {
          this.setState({
            imgData: res.msg,
          })
          this.imgHandelVisible(true);
        }else {
          Modal.error({title: '操作失败',content: res.msg});
        }
      }
    });
  }

  renderSimpleForm() {
    const { form: {getFieldDecorator} } = this.props;
    const fileTypeData = [{"name":"CSV","value":"1"},{"name":"PPT","value":"2"},{"name":"PDF","value":"5"},{"name":"WORD","value":"4"},{"name":"EXCEL","value":"3"}]
    const fontData = [{"name":"微软雅黑","value":"微软雅黑"},{"name":"宋体","value":"宋体"},{"name":"楷体","value":"楷体"}]
    const fontSizeData = [{"name":"8px","value":"8"},{"name":"10px","value":"10"},{"name":"12px","value":"12"},{"name":"14px","value":"14"},{"name":"16px","value":"16"},{"name":"18px","value":"18"},{"name":"32px","value":"32"},{"name":"22px","value":"22"},{"name":"24px","value":"24"},{"name":"26px","value":"26"},{"name":"28px","value":"28"},{"name":"30px","value":"30"},{"name":"20px","value":"20"}]
    const colorStyle = {
      width: '100%',
      height: '30px',
      padding: '0',
      border: '1px solid #d9d9d9',
      borderRadius: '4px',
      overflow: 'hidden',
      marginTop: '2px',
    }
    return (
      <Card bordered={false}>
      <Form>
        <Row gutter={16}>
          <Col md={12}>
            <FormItem {...formItemLayout} label="文件类型">
              {getFieldDecorator('fileSuffix', {
                rules: [{ required: true,message:'请选择文件类型'}],initialValue:"4"
              })(<Select placeholder="请选择">
                {
                  fileTypeData && fileTypeData.map((item,index) => {
                    return (<Option  key={index} value={item.value}>{item.name}</Option>)
                  })
                }
              </Select>)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="字体">
              {getFieldDecorator('font', {
                rules: [{ required: true,message:'请选择字体'}],initialValue: '宋体'
              })(<Select>
                {
                  fontData && fontData.map((item,index) => {
                    return (<Option  key={index} value={item.value}>{item.name}</Option>)
                  })
                }
              </Select>)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="字号">
              {getFieldDecorator('fontSize', {
                rules: [{ required: true,message:'请选择字号'}],initialValue: '20'
              })(<Select>
                {
                  fontSizeData && fontSizeData.map((item,index) => {
                    return (<Option  key={index} value={item.value}>{item.name}</Option>)
                  })
                }
              </Select>)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="颜色">
              {getFieldDecorator('color', {
                rules: [{ required: true,message:'请选择颜色'}],
              })(<InputColor
                  style={colorStyle}
                  initialHexColor="#333"
                  placement="right"
                />)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="倾斜度">
              {getFieldDecorator('tilt', {
                rules: [{ required: true,message:'倾斜度不能为空'}], initialValue: '45'
              })(<InputNumber min={0} max={90} style={{ width: '100%' }} placeholder="0-90"/>)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="透明度">
              {getFieldDecorator('transparency', {
                rules: [{ required: true,message:'透明度不能为空'}],initialValue: '0.3'
              })(<InputNumber
                style={{ width: '100%' }} min={0.3} max={0.8} step={0.1} placeholder="0.3-0.8"
              />)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="行数">
              {getFieldDecorator('rowNums', {
                rules: [{ required: true,message:'行数不能为空'}], initialValue: '3'
              })(<InputNumber min={1} max={10} style={{ width: '100%' }} placeholder="1-10"/>)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="列数">
              {getFieldDecorator('colNums', {
                rules: [{ required: true,message:'列数不能为空'}], initialValue: '3'
              })(<InputNumber min={1} max={10} style={{ width: '100%' }} placeholder="1-10" />)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="底图宽度">
              {getFieldDecorator('picWidth')(<InputNumber min={0} max={10000} style={{ width: '100%' }} step={1} placeholder="0" />)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="底图高度">
              {getFieldDecorator('picHeight')(<InputNumber min={0} max={10000} style={{ width: '100%' }} step={1} placeholder="0" />)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="水印内容">
              {getFieldDecorator('waterContent', {
                rules: [{ required: true,message:'请选择水印内容'} ],initialValue: 1
              })(<Select placeholder="请选择" mode="multiple">
                <Option value={0}>用户名</Option>
                <Option value={1}>日期</Option>
                <Option value={2}>MAC地址</Option>
                <Option value={3}>IP地址</Option>
              </Select>)}
            </FormItem>
          </Col>

          <Col md={12}>
            <FormItem {...formItemLayout} label="预览">
              <Button type="primary" size="small" onClick={this.willLook}>点击查看</Button>
            </FormItem>
          </Col>
          <Col md={24}>
            <FormItem>
              <Button style={{display: 'block',margin: 'auto'}} type="primary" onClick={this.willLook}>开始添加水印</Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
      </Card>
    );
  }

  render() {
    // const {
    //   watermarkInterface: { data },
    //   loading,
    // } = this.props;
    const { detailVisible, uploading, fileList, imgData} = this.state;
    let title = '上传文件';

    const props = {
      onRemove: (file) => {
        this.setState((state) => {
          const index = state.fileList.indexOf(file);
          const newFileList = state.fileList.slice();
          newFileList.splice(index, 1);
          return {
            fileList: newFileList,
          };
        });
      },
      beforeUpload: (file) => {
        this.setState(state => ({
          fileList: [...state.fileList, file],
        }));
        return false;
      },
      fileList,
    };

    // hh
    const detailsMethods = {
      detailHandelVisible: this.detailHandelVisible,
    };
    return (
      <PageHeaderWrapper title="文件水印">
        <Card bordered={false}>
          <div style={{display:'block'}}>
            <Upload {...props}>
              <Button disabled={uploading}>
                <Icon type="upload"/> 选择文件
              </Button>
            </Upload>
            <Button
              type="primary"
              onClick={this.doUpload}
              disabled={fileList.length === 0}
              loading={uploading}
              style={{marginTop: 16}}
            >
              {uploading ? '上传中' : '开始上传'}
            </Button>
          </div>
          <div>{this.renderSimpleForm()}</div>

          <div>
            <Button type="primary" onClick={this.willLook}>下载</Button>
          </div>

          {detailVisible?(
            <Details {...detailsMethods} detailVisible={detailVisible} imgData={imgData}/>
          ):null}
        </Card>
      </PageHeaderWrapper>
    );
  }
}
class Details extends PureComponent {
  render() {
    const { detailVisible, detailHandelVisible, imgData } = this.props;

    return (
      <Modal
        destroyOnClose
        width={800}
        title="预览"
        visible={detailVisible}
        onOk={() => detailHandelVisible()}
        onCancel={() => detailHandelVisible()}
        footer={[
          <Button key="back" type="primary" onClick={() => detailHandelVisible()}>返回</Button>
        ]}
      >
         <img src={imgData} />
      </Modal>
    );
  }
}
export default WatermarkInterface;
